<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="city1" id="s1">
    <option value="1">河北省</option>
    <option value="2">北京</option>
    <option value="3">山东</option>
</select>
<select name="city2" id="s2">
    <option value="">廊坊</option>
    <option value="">邯郸</option>
</select>
<!--    data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "朝阳区"], "山东": ["威海市", "烟台市"]}; 联动数据-->
<script>
    var s1 = document.getElementById("s1");
    s1.onchange = function()
    {
        var num = s1.value;
	    if (num === '1')
	    {
            var s2 = document.getElementById("s2");
            s2.innerHTML = "<option>廊坊</option><option>邯郸</option>";
            s1.background = red;
        }
        else if (num === '2')
	    {
            var s2 = document.getElementById("s2");
            s2.innerHTML = "<option>朝阳区</option><option>朝阳区</option>";
        }
        else (num === '3')
	    {
            var s2 = document.getElementById("s2");
            s2.innerHTML = "<option>威海市</option><option>烟台市</option>";
        }
    };
</script>
</body>
</html>